<%--
  Created by IntelliJ IDEA.
  User: 34123
  Date: 2023/6/27 0027
  Time: 下午 03:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>技术科录入页面</title>
    <link href="//unpkg.com/layui@2.8.8/dist/css/layui.css" rel="stylesheet">
    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.8.8/dist/layui.js"></script>

    <script src="https://cdn.bootcdn.net/ajax/libs/mustache.js/4.2.0/mustache.js"></script>
</head>
<style>
    .my-upload-demo {
        position: absolute;
        top: 0;
        right: 0;
    }
    .layui-table-tool .layui-inline1 [lay-event] {
        position: relative;
        width: 26px;
        height: 26px;
        padding: 5px;
        line-height: 16px;
        margin-right: 10px;
        text-align: center;
        color: #333;
        border: 1px solid #ccc;
        cursor: pointer;
        -webkit-transition: .5s all;
        transition: .5s all;
    }
</style>
<body>
<form action="" id="form-verifyPrice">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">款号</label>
            <div class="layui-input-inline"><input type="text" name="styleNumber" lay-verify="required" class="layui-input layui-disabled" value="" readonly></div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">版单号</label>
            <div class="layui-input-inline"><input type="text" name="sampleSheetNum" lay-verify="required"
                                                   class="layui-input layui-disabled" value="板单号自动生成" readonly></div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">客户</label>
            <div class="layui-input-inline"><div class="layui-form layui-row layui-col-space16 " >
                <div class="layui-col-md6 ">
                    <select name="clientId" id="client">
                        <option value="">请选择</option>
                    </select>
                </div>
            </div>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">版类</label>
            <div class="layui-input-inline"><input type="text" name="model" lay-verify="required"
                                                   placeholder="版类" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">品牌名称</label>
            <div class="layui-input-inline"><input type="text" name="brand" lay-verify="required"
                                                   placeholder="品牌名称" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">款式名称</label>
            <div class="layui-input-inline"><input type="text" name="styleName" lay-verify="required"
                                                   placeholder="款式名称" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">车板师</label>
            <div class="layui-input-inline">
                <div class="layui-form layui-row layui-col-space16 " >
                    <div class="layui-col-md6 ">
                        <select name="cardboardMaster" id="engineer1">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">设计师</label>
            <div class="layui-input-inline">
                <div class="layui-form layui-row layui-col-space16 " >
                    <div class="layui-col-md6 ">
                        <select name="stylistId" id="stylistId">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">设计号</label>
            <div class="layui-input-inline">
                <input type="text" name="designNumber" lay-verify="required" value="设计号自动生成" readonly class="layui-input layui-disabled">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">制板师</label>
            <div class="layui-input-inline">
                <div class="layui-form layui-row layui-col-space16 " >
                    <div class="layui-col-md6 ">
                        <select name="carBoardEngineer" id="engineer2">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">打板日期</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input layui-disabled" id="IpatternDate" name="patternDate" placeholder="打板日期为板单创建时间" readonly>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">完板日期</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="ID-laydate-demo" placeholder="yyyy-MM-dd" name="finishedPlateDate">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">净重</label>
            <div class="layui-input-inline"><input type="text" name="suttle" lay-verify="required" placeholder="G\KG" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">款式单位：</label>
            <div class="layui-input-inline"><input type="text" name="styleUnit" lay-verify="required" placeholder="XX款式单位" class="layui-input">
            </div>
        </div>
        <input type="hidden" name="styleNumberId" lay-verify="required" class="layui-input layui-disabled" value="" readonly></div>

    </div>
    <fieldset class="layui-elem-field layui-field-title">
        <legend>成分选择</legend>
    </fieldset>
    <div class="layui-table-tool" style="padding: 0px 0px">
        <div class="layui-table-tool-temp">
            <div class="layui-inline1" lay-event="add">
                <i class="layui-icon layui-icon-add-1" id="ID-add-row-btn" style="font-size:20px;"></i>
                <i class="layui-icon layui-icon-delete" id="ID-delete-row-btn" style="font-size:20px;"></i>
            </div>
        </div>
    </div>
    <table class="layui-hide" id="ID-table-demo-editmodes"></table>
    <fieldset class="layui-elem-field layui-field-title">
        <legend>辅料选择</legend>
    </fieldset>
    <div class="layui-table-tool" style="padding: 0px 0px">
        <div class="layui-table-tool-temp">
            <div class="layui-inline1" lay-event="add">
                <i class="layui-icon layui-icon-add-1" id="ID-add-row-btn2" style="font-size:20px;"></i>
                <i class="layui-icon layui-icon-delete" id="ID-delete-row-btn2" style="font-size:20px;"></i>
            </div>
        </div>
    </div>
    <table class="layui-hide" id="ID-table-demo-editmodes2"></table>
    <fieldset class="layui-elem-field layui-field-title">
        <legend>尺码数量选择</legend>
    </fieldset>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">S</label>
            <div class="layui-input-inline"><input type="text" name="quotationFactory" lay-verify="required"
                                                   class="layui-input layui-disabled" value="数量" readonly></div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">M</label>
            <div class="layui-input-inline"><input type="text" name="quotationFactory" lay-verify="required"
                                                   class="layui-input layui-disabled" value="数量" readonly></div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">L</label>
            <div class="layui-input-inline"><input type="text" name="quotationFactory" lay-verify="required"
                                                   class="layui-input layui-disabled" value="数量" readonly></div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">XL</label>
            <div class="layui-input-inline"><input type="text" name="quotationFactory" lay-verify="required"
                                                   class="layui-input layui-disabled" value="数量" readonly></div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">2XL</label>
            <div class="layui-input-inline"><input type="text" name="quotationFactory" lay-verify="required"
                                                   class="layui-input layui-disabled" value="数量" readonly></div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">3XL</label>
            <div class="layui-input-inline"><input type="text" name="quotationFactory" lay-verify="required"
                                                   class="layui-input layui-disabled" value="数量" readonly></div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">4XL</label>
            <div class="layui-input-inline"><input type="text" name="quotationFactory" lay-verify="required"
                                                   class="layui-input layui-disabled" value="数量" readonly></div>
        </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title">
        <legend>工艺要求规范</legend>
    </fieldset>
    <div>
        <hr class="ws-space-16">
        <textarea name="" placeholder="工艺要求规范" class="layui-textarea"></textarea>
    </div>
    <div>
        <fieldset class="layui-elem-field layui-field-title">
            <legend>文件上传</legend>
        </fieldset>
            <hr style="margin: 21px 0;">
            <div class="layui-upload">
                <button type="button" class="layui-btn layui-btn-normal" id="ID-upload-demo-files">选择多文件</button>
                <div class="layui-upload-list">
                    <table class="layui-table">
                        <colgroup>
                            <col style="min-width: 100px;">
                            <col width="150">
                            <col width="260">
                            <col width="150">
                        </colgroup>
                        <thead>
                        <th>文件名</th>
                        <th>大小</th>
                        <th>上传进度</th>
                        <th>操作</th>
                        </thead>
                        <tbody id="ID-upload-demo-files-list"></tbody>
                    </table>
                </div>
                <button type="button" class="layui-btn" id="ID-upload-demo-files-action">开始上传</button>
            </div>
    </div>
</form>
<div class="layui-form-item">
    <div class="layui-input-block">
        <button class="layui-btn"  onclick="toAddSampleSheet()">确定</button>
        <button type="reset" class="layui-btn layui-btn-primary" id="resetBtn" >重置</button>
    </div>
</div>
</div>
</body>
<script src="//unpkg.com/layui@2.8.8/dist/layui.js"></script>
<script>
    layui.use(function(){
        var laydate = layui.laydate;
        // 渲染
        laydate.render({
            elem: '#ID-laydate-demo'
        });
    });
</script>
<!--表格1里的下拉框-->
<script type="text/html" id="TPL-select-primary">
    {{#  var cityList = d.cityList || ["尼龙布","莫代尔面料","牛奶丝"]; }}
    <select name="materials" class="layui-border select-demo-primary" lay-ignore>
        <option value="">选择主要的面料</option>
        {{#  layui.each(cityList, function(i, v){

        }}
        <option value="{{= v }}" {{= v === d.city ? 'selected' : '' }}>{{= v }}</option>
        {{#  }); }}
    </select>
</script>
<!--表格1里text输入框-->
<script type="text/html" id="TPL-select-primary1">
    <input type="text" name="" placeholder="净含量" class="layui-input">
</script>
<script type="text/html" id="TPL-select-primary11">
    <input type="text" name="" placeholder="物料使用量" class="layui-input">
</script>
<!--layui表格1数据和渲染表格-->
<script src="//unpkg.com/layui@2.8.8/dist/layui.js"></script>
<script>
    layui.use(['table'], function () {
        var table = layui.table;

        // 监听按钮点击事件
        document.getElementById('ID-add-row-btn').addEventListener('click', function () {
            var tableId = 'ID-table-demo-editmodes';
            var data = table.cache[tableId];
            var newRow = {
                // 新行的数据
                id: data.length + 1,
                name: '新行' + (data.length + 1),
                age: 0,
                gender: '男'
            };
            data.push(newRow);
            table.reload(tableId, {
                data: data
            });
        });
        // 监听删除选中行按钮点击事件
        document.getElementById('ID-delete-row-btn').addEventListener('click', function () {
            var tableId = 'ID-table-demo-editmodes';
            var checkStatus = table.checkStatus(tableId);
            var selectedData = checkStatus.data;
            var data = table.cache[tableId];

            // 从数据数组中移除选中行的数据
            for (var i = 0; i < selectedData.length; i++) {
                var index = data.findIndex(function (item) {
                    return item.id === selectedData[i].id;
                });
                if (index !== -1) {
                    data.splice(index, 1);
                }
            }

            table.reload(tableId, {
                data: data
            });
        });

        // 渲染表格
        table.render({
            elem: '#ID-table-demo-editmodes',
            //url:'SampleSheet/queryAllMaterials2',
            cols: [[
                {checkbox: true, fixed: true},
                {field: 'sampleSheetMaterialsRelId', title: 'ID', width:80, align: 'center', fixed: 'left'},
                {field: 'materialsName', title: '物料名称', width:150, templet: '#TPL-select-primary'},
                {field: 'percentage', title: '净含量(%)', width:150, align: 'center', templet: '#TPL-select-primary1'},
                {field: 'materialsAmount', title: '物料使用量(米)', width:150, align: 'center', templet: '#TPL-select-primary1'}
            ]],
            data: [

            ],
            page: true
        });
    });
</script>
<!--表格2里面的下拉框-->
<script type="text/html" id="TPL-select-primary2">
    {{#  var cityList = d.cityList || ["纽扣","拉链","魔术贴"]; }}
    <select name="city" class="layui-border select-demo-primary2" lay-ignore>
        <option value="">选择辅料</option>
        {{#  layui.each(cityList, function(i, v){ }}
        <option value="{{= v }}" {{= v === d.city ? 'selected' : '' }}>{{= v }}</option>
        {{#  }); }}
    </select>
</script>
<!--表格2里面的下拉框-->
<script type="text/html" id="TPL-select-primary3">
    <input type="text" name="" placeholder="净含量(%)" class="layui-input">
</script>
<script type="text/html" id="TPL-select-primary13">
    <input type="text" name="" placeholder="物料使用量" class="layui-input">
</script>
<!--layui表格2数据和渲染表格-->
<script src="//unpkg.com/layui@2.8.8/dist/layui.js"></script>
<script>
    layui.use(['table'], function () {
        var table = layui.table;

        // 监听按钮点击事件
        document.getElementById('ID-add-row-btn2').addEventListener('click', function () {
            var tableId = 'ID-table-demo-editmodes2';
            var data = table.cache[tableId];
            var newRow = {
                // 新行的数据
                id: data.length + 1,
                name: '新行' + (data.length + 1),
                age: 0,
                gender: '男'
            };
            data.push(newRow);
            table.reload(tableId, {
                data: data
            });
        });
        // 监听删除选中行按钮点击事件
        document.getElementById('ID-delete-row-btn2').addEventListener('click', function () {
            var tableId = 'ID-table-demo-editmodes2';
            var checkStatus = table.checkStatus(tableId);
            var selectedData = checkStatus.data;
            var data = table.cache[tableId];

            // 从数据数组中移除选中行的数据
            for (var i = 0; i < selectedData.length; i++) {
                var index = data.findIndex(function (item) {
                    return item.id === selectedData[i].id;
                });
                if (index !== -1) {
                    data.splice(index, 1);
                }
            }

            table.reload(tableId, {
                data: data
            });
        });

        // 渲染表格
        table.render({
            elem: '#ID-table-demo-editmodes2',
            cols: [[
                {checkbox: true, fixed: true},
                {field: 'id', title: 'ID', width:80, align: 'center', fixed: 'left'},
                {field: 'city2', title: '辅料名称', width:150, templet: '#TPL-select-primary2'},
                {field: 'sex2', title: '数量(颗)', width:150, align: 'center', templet: '#TPL-select-primary3'}
            ]],
            data: [

            ],
            page: true
        });
    });
</script>
<!--上传文件-->
<script src="//unpkg.com/layui@2.8.8/dist/layui.js"></script>
<script>
    layui.use(function(){
        var upload = layui.upload;
        var element = layui.element;
        var $ = layui.$;
        // 制作多文件上传表格
        var uploadListIns = upload.render({
            elem: '#ID-upload-demo-files',
            elemList: $('#ID-upload-demo-files-list'), // 列表元素对象
            url: '${pageContext.request.contextPath}/SampleSheet/uploadFiles', // 此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            accept: 'file',
            multiple: true,
            number: 3,
            auto: false,
            bindAction: '#ID-upload-demo-files-action',
            choose: function(obj){
                var that = this;
                var files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列
                // 读取本地文件
                obj.preview(function(index, file, result){
                    var tr = $(['<tr id="upload-'+ index +'">',
                        '<td>'+ file.name +'</td>',
                        '<td>'+ (file.size/1024).toFixed(1) +'kb</td>',
                        '<td><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></td>',
                        '<td>',
                        '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>',
                        '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',
                        '</td>',
                        '</tr>'].join(''));

                    // 单个重传
                    tr.find('.demo-reload').on('click', function(){
                        obj.upload(index, file);
                    });

                    // 删除
                    tr.find('.demo-delete').on('click', function(){
                        delete files[index]; // 删除对应的文件
                        tr.remove(); // 删除表格行
                        // 清空 input file 值，以免删除后出现同名文件不可选
                        uploadListIns.config.elem.next()[0].value = '';
                    });

                    that.elemList.append(tr);
                    element.render('progress'); // 渲染新加的进度条组件
                });
            },
            done: function(res, index, upload){ // 成功的回调
                var that = this;
                // if(res.code == 0){ // 上传成功
                var tr = that.elemList.find('tr#upload-'+ index)
                var tds = tr.children();
                tds.eq(3).html(''); // 清空操作
                delete this.files[index]; // 删除文件队列已经上传成功的文件
                return;
                //}
                this.error(index, upload);
            },
            allDone: function(obj){ // 多文件上传完毕后的状态回调
                console.log(obj)
            },
            error: function(index, upload){ // 错误回调
                var that = this;
                var tr = that.elemList.find('tr#upload-'+ index);
                var tds = tr.children();
                // 显示重传
                tds.eq(3).find('.demo-reload').removeClass('layui-hide');
            },
            progress: function(n, elem, e, index){ // 注意：index 参数为 layui 2.6.6 新增
                element.progress('progress-demo-'+ index, n + '%'); // 执行进度条。n 即为返回的进度百分比
            }
        });
    });
   //渲染款号下拉框
    layui.use(['form'], function() {
        var form = layui.form;

        // 从后端接口获取数据
        $.ajax({//获取客户
            url: 'SampleSheet/getClientName',
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                var dropdown = document.getElementById('client');
                console.log(data)
                console.log("client is here")
                // 渲染下拉框选项
                data.forEach(function(item) {
                    var option = document.createElement('option');
                    option.value = item.clientId;
                    option.text = item.clientName; // 设置选项的显示文本，可以根据需求调整
                    dropdown.appendChild(option);
                });
                // 重新渲染表单元素
                form.render('select');
            }
        });

        let BoardMakerURL='SampleSheet/getBoardMaker';//URL
        let BoardMakerDropdown=document.getElementById('engineer1')//目标元素
        let cardboardMasterDropdown=document.getElementById('engineer2');//目标元素
        specialtyDesign(BoardMakerURL,BoardMakerDropdown);//渲染下拉框的方法
        specialtyDesign(BoardMakerURL,cardboardMasterDropdown);

        let stylistURL='SampleSheet/getStylist';//请求路径
        let stylistDropdown = document.getElementById('stylistId');//渲染目标元素
        specialtyDesign(stylistURL,stylistDropdown);


        //渲染下拉框的函数，渲染的元素包括板师和设计师
        //只是用于员工下拉框的渲染
        function specialtyDesign(url,dropdown){
            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    // 渲染下拉框选项
                    data.forEach(function(item) {
                        var option = document.createElement('option');
                        option.value = item.staffId;
                        option.text = item.staffName; // 设置选项的显示文本，可以根据需求调整
                        dropdown.appendChild(option);
                    });
                    // 重新渲染表单元素
                    form.render('select');
                }
            });
        }
        var selectElement = document.getElementById('materials');
        layui.laytpl(TPL_select_primary.innerHTML).render(data, function(html){ selectElement.innerHTML = html; });
    });

</script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
    $.ajax( {
        "url"            :  "SampleSheet/getClientName",                      // 要提交的URL路径
        "type"         :  "get",                     // 发送请求的方式
        "data"         :  {},                      // 要发送到服务器的数据
        "dataType" :  "json",                   // 期望接受的数据格式
        /* "contentType":"application/json;charset=utf-8;",*/
        "success"  :  function(data) {  // 请求成功后要执行的代码
            let client=document.createElement('selectClient');
            console.log(data);
            data.forEach(function (item) {
                let option=document.createElement('option');
                option.value=item.clientId;
                option.text =item.clientName;
                client.appendChild(option);
            })
            // 重新渲染表单元素
            form.render('select');

        },
        "error"       :  function() {           // 请求失败后要执行的代码
            alert("网络正忙！")
        }
    } );
        function toAddSampleSheet(){
            let data ={};
            let value = $('form').serializeArray();
            $.each(value, function (index,item) {
                data[item.name] = item.value;
            });
            let SampleSheet = JSON.stringify(data);
            $.ajax( {
                "url"            :  "SampleSheet/addSampleSheet",                      // 要提交的URL路径
                "type"         :  "post",                     // 发送请求的方式
                "data": SampleSheet,                    // 要发送到服务器的数据
                "dataType" :  "text",                   // 期望接受的数据格式
                "contentType":"application/json;charset=utf-8;",
                "success"  :  function(result) {  // 请求成功后要执行的代码
                    // console.log(result);
                    if(result=="success"){
                        alert("添加成功");
                    }else{
                        alert("新增失败");
                    }
                },
                "error"       :  function() {           // 请求失败后要执行的代码
                    alert("网络正忙");
                }
            } );
        }
    let styleNumberId=${param.styleNumberId};
    let styleNumber=${param.styleNumber};
    $("input[name='styleNumberId']").val(styleNumberId)
    $("input[name='styleNumber']").val(styleNumber)



</script>
</html>
